<template>
  <div class="media">
    <div class="logo">
      <el-image src="https://xhycc.hnthwh.com/psychology/media/media-logo.png">
      </el-image>
    </div>
    <div class="tab">
      <el-tabs v-model="activeName" @tab-click="handleClick" stretch="true">
<!--        <el-tab-pane label="一年级" name="one">-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="二年级" name="two"></el-tab-pane>-->
<!--        <el-tab-pane label="三年级" name="three"></el-tab-pane>-->
<!--        <el-tab-pane label="四年级" name="four"></el-tab-pane>-->
<!--        <el-tab-pane label="五年级" name="five"></el-tab-pane>-->
<!--        <el-tab-pane label="六年级" name="six"></el-tab-pane>-->
        <el-tab-pane label="七年级" name="seven"></el-tab-pane>
        <el-tab-pane label="八年级" name="eight"></el-tab-pane>
        <el-tab-pane label="九年级" name="nine"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="tab-content">
      <div class="grade">
        <el-image :src="titleImage"></el-image>
      </div>
      <div class="list">
        <div class="course" v-for="(item,index) in courseList">
          <div class="course_number">{{item.code}}</div>
          <a :href="item.href" target="_blank">
            <div class="course_name">{{item.name}}</div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { listMedia } from '@/api/media/media'

export default {
  name: 'Media',
  data () {
    return {
      activeName: 'seven',
      titleImage: 'https://xhycc.hnthwh.com/psychology/media/seven.png',
      courseList: [],
      params: {
        grade: 7,
        pageNum: 1,
        pageSize: 20,
        orderByColumn: 'code'
      }
    }
  },
  created () {
    this.getList(7)
  },
  methods: {
    handleClick (tab) {
      let grade = 1
      switch (tab.name) {
        case 'one':
          grade = 1
          break
        case 'two':
          grade = 2
          break
        case 'three':
          grade = 3
          break
        case 'four':
          grade = 4
          break
        case 'five':
          grade = 5
          break
        case 'six':
          grade = 6
          break
        case 'seven':
          grade = 7
          break
        case 'eight':
          grade = 8
          break
        default:
          grade = 9
      }
      this.titleImage = `https://xhycc.hnthwh.com/psychology/media/${tab.name}.png`
      this.getList(grade)
    },

    getList (grade) {
      this.params.grade = grade
      listMedia(this.params).then(response => {
        this.courseList = response.rows
      })
    }

  }
}
</script>
<style scoped lang="scss">

.media {
  background-color: #f7f7f7;
  width: 100%;
  height: 1140px;

  .logo {
    margin-left: auto;
    margin-right: auto;
    padding-top: 25px;
    padding-bottom: 25px;
    width: 230px;
    height: 90px;
  }

  .tab {
    width: 1383px;
    height: 40px;
    margin: auto;

    ::v-deep .el-tabs__item {
      font-size: 25px;
    }
  }

  .tab-content {
    background: url('https://xhycc.hnthwh.com/psychology/media/border.png') no-repeat;
    background-position: 90px -50px; /* 水平方向50像素，垂直方向100像素 */
    height: 1000px;
    width: 100%;
    position: relative;

    .grade {
      position: absolute;
      top: 15px;
      left: 850px;
    }

    .list {
      position: absolute;
      top: 150px;
      left: 460px;
      width: 1170px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .course {
        width: 537px;
        height: 60px;
        background-image: url("https://xhycc.hnthwh.com/psychology/media/course.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;

        .course_number {
          width: 72px;
          height: 60px;
          line-height: 60px;
          font-size: 35px;
          color: #fff;
          text-align: center;
        }

        .course_name {
          width: 465px;
          height: 60px;
          line-height: 60px;
          text-align: center;
          font-size: 28px;
          color: #fff;
          cursor: pointer;
        }
      }
    }

  }


}


</style>
